<template>
<div class="d1">

	<div id="ddd1" class="d2">
		<dlqmap v-show="map"></dlqmap>
		<overview v-show="overview" :run="overview"></overview>
	</div>

	<div class="a1" :style="{left : offsetwidth - 265 + 'px'}">
		<div type="primary" class="btn" :class="{ active1 : map }"
		@click="clickMap"
		>地 图</div>
		<div type="primary" class="btn" :class="{ active1 : overview }"
		style="margin-left : 15px;"
		@click="clickOverview"
		>概 览</div>
	</div>

</div>
</template>

<script>

import dlqmap from '../map/index1_1'
import overview from '../overview/index_1'

export default {
	
	name : 'dashboard',
	
	data () {
		return {
		  	activeName2 : 'first',
		  	offsetwidth : document.documentElement.clientWidth,
            run:false,
		  	// offsetheight : document.documentElement.clientHeight - 150,


		  	map : true,
		  	overview : false,
		}
	},

	props : {

	},

	components : {
		dlqmap,
		overview,
	},

	computed : {
		
	},

	methods : {
		clickOverview () {
			this.overview = true;
			this.map = false;
		},
		clickMap () {
			this.overview = false;
			this.map = true;
			this.$router.go(0)
		},
	},

	watch : {
      activeName2(ret){
      	if(ret === 'second') {
      		this.run = true
        }else{
            this.run = false
        }
      }
	},

	mounted () {

	},

}
</script>

<style scoped>
.a1 {
	position: absolute;
	z-index: 999;
	width : 215px;
	top :110px;
	/*left: 655px;*/

}

.d1 {
	/*width: 1850px;*/
	/*height: 940px;*/
	background:rgba(8,55,73,0.7);
	padding: 15px;
}

.d2 {
	/*width: 1850px;*/
	/*height: 940px;*/
	overflow: hidden;

	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;

}

.btn {
	width:100px;
	height:37px;
	background:rgba(39,206,191,1);
	float: left;
	text-align: center;
	color : #fff;
	padding-top: 13px;
	cursor: pointer;
}
.active1 {
	width:100px;
	height:37px;
	background:rgba(10,137,145,1);
}
</style>
